<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- <title></title>
		<link rel="stylesheet" type="text/css" href="202311008893 软3 何欣莉.css"> -->

		

	</head>
	<body>
		<div class="biaotou">
			<span class="logo">网易云音乐</span>
			<a href="#"><em>发现音乐</em></a>
			<a href="#"><em>我的音乐</em></a>
			<a href="#"><em>关注</em></a>
			<a href="#"><em>商城</em></a>
			<a href="#"><em>音乐人</em></a>
			<a href="#"><em>云推歌</em></a>
			<a href="#"><em>下载客户端</em></a>
			<span><input type="text" value="音乐/视频/电台/用户" class="shousuo"></span>
			<a href="#"><em class="chuang">创作者中心</em></a>
			<a href="#"><em class="deng">登录</em></a>
		</div>
		<div class="xiangmu">
			<em><a href="#">推荐</a></em>
			<em><a href="#">排行榜</a></em>
			<em><a href="#">歌单</a></em>
			<em><a href="#">主播电台</a></em>
			<em><a href="#">歌手</a></em>
			<em><a href="#">新碟上架</a></em>
		</div>
		<div class="kaitou">
			<div class="tup"><img src="img/kslea9uh.png " class="shouye"></div>
			<div class="lv"><a href="#"><input type="submit" value="下载客户端"></a></div>
		</div>
		<div class="nierong">
			<div class="gedan">
				<div class="tuijian">
				<div class="um">
				<em class="shou"><strong>热门推荐</strong></em>
				<em class="biao"><a href="#">华语</a></em>
				<em class="biao"><a href="#">流行</a></em>
				<em class="biao"><a href="#">摇滚</a></em>
				<em class="biao"><a href="#">民谣</a></em>
				<em class="biao"><a href="#">电子</a></em>
				<em class="biao"><a href="#" class="re">更多</a></em>	`
				</div>
			    </div>
			<ul class="gedannierong">
				<li  class="ge">
					<div class="gedan1">
					  </div>
					<div class="wen">
					【国人纯音赏】聆听国人华章
					</div>
				</li>
				<li class="ge">
					<div class="gedan2">
					 </div>
					 <div class="wen">
					「1963-至今」日本经典动漫音乐大盘点
					</div>
				</li>
				<li class="ge">
					<div class="gedan3">
						
					  </div>
					  <div class="wen">
						你总要一个人，经历些难捱的日子
					</div>
				</li>
				<li class="ge">
					<div class="gedan4">
				   </div>
				   <div class="wen">
					宝藏挖掘机|分享好音乐和金曲
				    </div>	
				</li>
				<li class="ge">
					<div class="gedan5">
					   </div>
					   <div class="wen">
						【R&B】在星河璀璨下微醺
					   </div>
				</li>
				<li class="ge">
					<div class="gedan6">
					 </div>
					 <div class="wen">
						国产HIPHOP从地下到了地上
					</div>
				</li>
				<li class="ge">
					<div class="gedan7">
					</div>
					<div class="wen">
					先导小剧场-回应
					</div>
				</li>
				<li class="ge">
					<div class="gedan8">
					</div>
					<div class="wen">
						和电影《三大队》的原
						著作者深蓝
					</div>
				</li>
		    </ul>
				
			<div class="xindie">
				<div class="um">
				<em class="shou"><strong>新碟上架</strong></em>
				<em><a href="#" class="re">更多</a></em>	
			</div>
			<ul class="die">
				<li class="x">
					<div class="img1">
					<p class="www">左然</p>
					</div>
				</li>
				<li class="x">
					<div class="img2">
						<p class="www">左然</p>
					</div>
				</li>
				<li class="x">
					<div class="img3">
						<p class="www">左然</p>
					</div>
				</li>
				<li class="x">
					<div class="img4">
						<p class="www">左然</p>
					</div>
				</li>
				<li class="x">
					<div class="img5">
						<p class="www">左然</p>
					</div>
				</li>
			</ul>
			</div>
			<div class="bangdang"> 
				<div class="um">
					<em class="shou"><strong>榜单</strong></em>
					<em><a href="#" class="re">更多</a></em>	
				</div>
				<table  class="biao1">
					<tr class="bb1"><td><img src="img/bsb.png"><p>飙升榜</p></td>
					<td><img src="img/xgb.png"><p>新歌榜</p></td>
					<td><img src="img/ycb.png"><p>原创榜</p></td>
					</tr>
					<tr class="b2">
					<td><span>1</span>Christmas Lis</td>
					<td><span>1</span>阳光男孩阳光女孩2023</td>
					<td><span>1</span>骨骼谢幕</td>
					</tr>
					<tr class="b1">
					<td><span>2</span>圣诞结</td>
					<td><span>2</span>爱丫爱丫 (live)</td>
					<td><span>2</span>理想国</td>
					</tr>
					<tr class="b2">
					<td><span>3</span>All I Want for Christmas Is You</td>
					<td><span>3</span>幕后生活</td>
					<td><span>3</span>蝴蝶星云</td>
					</tr>
					<tr class="b1">
					<td><span>4</span>All I Want for Christmas Is You</td>
					<td><span>4</span>十二月的奇迹</td>
					<td><span>4</span>让星</td>
					</tr>
					<tr class="b2">
					<td><span>5</span>WINTER WITHOUT YOU</td>
					<td><span>5</span>忘记</td>
					<td><span>5</span>Start From The Bottom</td>
					</tr>
					<tr class="b1">
					<td><span>6</span>圣诞不是freestyle</td>
					<td><span>6</span>11</td>
					<td><span>6</span>未满足 Freestyle</td>
					</tr>
					<tr class="b2">
					<td><span>7</span>A Nonsense Christmas</td>
					<td><span>7</span>爱到你说</td>
					<td><span>7</span>白日做梦</td>
					</tr>
					<tr class="b1">
					<td><span>8</span>Lonely Christmas</td>
					<td><span>8</span>冬天的秘密</td>
					<td><span>8</span>啼血鹃</td>
					</tr>
					<tr class="b1">
					<td><span>9</span>浪漫鬼</td>
					<td><span>9</span>Dimasman</td>
					<td><span>9</span>好天气 坏天气</td>
					</tr>
					<tr class="b2">
					<td><span>10</span>S.M.V</td>
					<td><span>10</span>焰火夜光</td>
					<td><span>10</span>Pluggnsex</td>
					</tr>
					<tr class="b1">
					<td><p>查看全部→</p></td>
					<td><p>查看全部→</p></td>
					<td><p>查看全部→</p></td>
					</tr>
				</table>
			</div>
				
		</div>
	    <div class="deng2">
			<p class="w">登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p>
		<input type="submit" value="用户登录" class="ddd"></div>
		<div class="geshou">
			<div class="um">
				<em class="shou"><strong>入驻歌手</strong></em>
				<em><a href="#" class="re">查看全部></a></em>
			</div>
		    <ul class="paige">
				<li class="pai">
				    <img src="img/zhm.png" >
				    <div class="mingxing">
				    <p class="mxw">张惠妹aMEI</p>
				    <p class="mxw">台湾歌手</p>
				     </div>
				</li>
			<li class="pai">
				<img src="img/wmc.png" alt="">
				<div class="mingxing">	
					<p class="mxw">吴莫愁</p>
					<p class="mxw">歌手吴莫愁</p>
				</div>
			</li>
			<li class="pai">
				<img src="img/sn.png" alt="">
				<div class="mingxing">
					<p class="mxw">孙楠</p>
					<p class="mxw">歌手孙楠</p>
				</div>
			</li>	
			<li class="pai">
				<img src="img/mtll.png" alt="">
				<div class="mingxing">
					<p class="mxw">麦田老狼</p>
					<p class="mxw">歌手音乐人</p>
				</div>
			</li>	
			<li class="pai">
				<img src="img/ccs.png" alt="">
				<div class="mingxing">
					<p class="mxw">陈楚生</p>
					<p class="mxw">唱作歌手</p>
				</div>
			  </li>
				<div>
			     <input type="submit" value="申请成为音乐制作人" class="dd">
				 </div>
			</ul>	 
	        </div>
		<div class="zhubo">
			<div class="um">
				<em class="shou"><strong>热门主播</strong></em>
			</div>	
			<ul class="paige">
				<li class="pai">
				    <img src="img/cl.png" >
				    <div class="mingxing">
				    <p class="mxw">陈立</p>
				    <p class="mxw">心理学家</p>
				     </div>
				</li>
			<li class="pai">
				<img src="img/ll.png" alt="">
				<div class="mingxing">	
					<p class="mxw">刘维-Julius</p>
					<p class="mxw">歌手</p>
				</div>
			</li>
			<li class="pai">
				<img src="img/cuizui.png" alt="">
				<div class="mingxing">
					<p class="mxw">碎嘴许美达</p>
					<p class="mxw">脱口秀网络红人</p>
				</div>
			</li>	
			<li class="pai">
				<img src="img/mof.png" alt="">
				<div class="mingxing">
					<p class="mxw">莫非定律乐团</p>
					<p class="mxw">男女双人全创作独立乐团</p>
				</div>
			</li>	
			<li class="pai">
				<img src="img/ly.png" alt="">
				<div class="mingxing">
					<p class="mxw">银临Rachel</p>
				</div>
			  </li>
			</ul>
		</div>
		
	</body>
</html>

<style>
	body{
				width: 1500px;
				height: 2500px;
				background-color: #f5f5f5;
			}
			*{
				padding: 0px;
				margin: 0px;
			}
		.biaotou{
					display: block;
					width: 100%;
					height: 89px;
					background-color: #242424;
					text-align: center;
					color:#CCCCCC ;
					line-height: 89px;
					text-decoration: none;
				    }
			    .biaotou em{
				font-size: 15px;
				padding: 20px;
				color:#CCCCCC ;
			    }
			    .biaotou a{
				text-decoration:none;
			    }
			    .biaotou em:hover{
				color:#FFFFFF ;
				background-color: black;
			    }
			    .biaotou .logo{
				padding: 0px 19px;
				font-size: 25px;
			    }
			    .biaotou .shousuo{
				border-radius: 50px;
			    }
			    .biaotou .deng{
				font-size: 12px;
			    }
			    .biaotou .chuang{
				border-radius: 20px;
				color: #CCCCCC;
				border: 1px solid #CCCCCC;
				font-size: 13px;
				padding: 0pc 19px 5px 19px;
				margin: 0px 0px 0px 0px;
			    }
			.xiangmu{
				border: 0px;
				width: 100%;
				height: 48px;
				background-color: #C80014;
				text-align: center;
				line-height: 48px;
			    }
			    .xiangmu em{
				margin: 0px;
				padding: 20px;
			    }
			    .xiangmu a{
				margin: 0px 0px ;
				padding: 5px 20px;
				border-radius: 50px;
				text-decoration:none;
				color: #FFFFFF;
				font-size: 13px;
			    }
			    .xiangmu a:hover{
				background-color: #A0000F;
			    }
		    .kaitou{
			 width: 100%;
			 height: 350px;
			 background-color: rgba(177,88,75, 0.7);
		     }
		        .kaitou .shouye{
			    height: 350px;
			    padding-left: 200px;
			    float: left;
		        }
		        .kaitou .lv {
			    width: 250px;
			    height: 350px;
			    background-color: #242424;
			    float: left;
		        }
		        .kaitou input{
			    background-color: #236ECF;
			    color: #FFFFFF;
			    width: 200px;
			    height: 50px;
			    margin: 186px 0px 0px 25px;
			    }
		    .nierong{
			    padding-left: 200px;
			    float: left;
			    background-color: #CCCCCC;
		        }
		        .nierong .gedan{
			     padding: 20px 20px 40px;
			    width: 858px;
			    height: 1563px;
			    background-color: #FFFFFF;
			    float: left;
			    border: 1px solid black;
		        }
		        .nierong .um{
			    border-bottom: 1px solid #C70014;
			    padding:0px 5px 5px 10px;
		        }
		        .nierong .biao{
			    padding: 0px 20px;
			    font-size: 15px;
			    color: black;
		        }
	  	        .nierong a{
			    text-decoration: none;
		        }
		        .nierong .shou{
			    font-size: 25px;
		         }
		         .nierong .re{
		    	float: right;
			    padding-right: 20px;
			     }
		         .nierong .gedannierong{
			     margin: 20px 10px;
		         }
		        .nierong .gedannierong .ge{
			    list-style: none;
			    display: inline-block;
			    width: 160px;
			    height: 200px;
			    padding: 0px 0px 30px 42px;
		         }
		         .nierong .gedannierong .gedan1{
		          background-image: url(img/gedan1.jpg);
		          display: block;
		          width: 140px;
		          height: 140px;
		          background-repeat: no-repeat;
		          float: left;
		          }
		          .nierong .gedannierong .gedan2{
		          	    background-image: url(img/gedan2.jpg);
		          	    display: block;
		          	    width: 140px;
		          	    height: 140px;
		          	    background-repeat: no-repeat;
		                   } 
		              .nierong .gedannierong .gedan3{
		          	     background-image: url(img/gedan3.jpg);
		          	     display: block;
		          	     width: 140px;
		          	     height: 140px;
		          	     background-repeat: no-repeat;
		                   }
		          .nierong .gedannierong .gedan4{
		          	 background-image: url(img/gedan4.jpg);
		          	 display: block;
		          	 width: 140px;
		          	 height: 140px;
		          	 background-repeat: no-repeat;
		              }
		          .nierong .gedannierong .gedan5{
		          	background-image: url(img/gedan5.jpg);
		          	display: block;
		          	width: 140px;
		          	height: 140px;
		          	background-repeat: no-repeat;
		          	
		          }
		          .nierong .gedannierong .gedan6{
		          	background-image: url(img/gedan6.jpg);
		          	display: block;
		          	width: 140px;
		          	height: 140px;
		          	background-repeat: no-repeat;
		          	
		          }
		          .nierong .gedannierong .gedan7{
		          	background-image: url(img/gedan7.jpg);
		          	display: block;
		          	width: 140px;
		          	height: 140px;
		          	background-repeat: no-repeat;
		          	padding-bottom: 20px;
		          }
		          .nierong .gedannierong .gedan8{
		          	background-image: url(img/gedan8.jpg);
		          	display: block;
		          	width: 140px;
		          	height: 140px;
		          	background-repeat: no-repeat;
		          	
		          }
		        
		.nierong .gedannierong .wen {
			width:140px;
			height:40px;
			font-size: 14px;
		}
		.xindie .die{
			width: 820px;
			height: 180px;
			margin-top: 20px;
			margin-left: px;
			background-color: #f5f5f5;
			line-height: 210px;
			}
		.xindie .x{
			width: 100px;
			height: 150px;
			list-style: none;
			display: inline-block;
			margin: 20px 30px;
		}
		.xindie .img1{
			width: 100px;
			height: 100px;
			background-image: url(img/xin1.jpg);
		}
		.xindie .img2{
			width: 100px;
			height: 100px;
			background-image: url(img/xin2.jpg);
		}
		.xindie .img3{
			width: 100px;
			height: 100px;
			background-image: url(img/xin3.jpg);
		}
		.xindie .img4{
			width: 100px;
			height: 100px;
			background-image: url(img/xin4.jpg);
		}
		.xindie .img5{
			width: 100px;
			height: 100px;
			background-image: url(img/xin5.jpg);
		}
		.xindie .www{
			width: 100px;
			height: 50px;
			margin-top:0px;
			font-size: 15px;
			padding: 15px;
		}
		.xindie .ww{
			width: 100px;
			height: 50px;
			padding: 10px 10px 10px 10px;
		}
		.bangdang .um{
			margin-top: 50px;
		}
		.bangdang table{
			width: 800px;
			border-collapse: collapse;
			border-color: black;
			border: 1px solid ;
			margin:30px auto;
		}
		.bangdang table td{
			height: 40px;
			border-color: black;
			border: 1px solid ;
			padding: 0px;
		}
		.bangdang .bb1{
			height: 130px;
			background-color: #F5f5f5;
		}
		.bangdang .bb1 img{ 
			width: 120px;
			height: 120px;
			padding: 10px 0px 10px 10px;
		}
		.bangdang .bb1 p{
			margin: 20px 10px;
			float: right;
			padding-right: 50px;
			font-size: 20px;
		}
		.bangdang .b2{
			background-color: #cccccc;
		}
		.bangdang .b1{
			background-color: #F5f5f5;
		}
		.bangdang  span{
			margin: 0px 10px;
		}
		.bangdang .b1 p{
			float: right;
			margin: 0px 30px;
		}
		.nierong .deng2{
			width: 208px;
			height: 200px;
			background-color: #f5f5f5;
			float: left;
			border: 1px solid black;
			padding: 0px 20px;
		}
		
		.deng2 .w{
			margin: 20px;
		}
		.nierong .ddd{
			width: 130px;
			height: 30px;
			background-color: #ED1A30;
			margin:35px;
		}
		.geshou {
			width: 228px;
			height: 600px;
			background-color: #f5f5f5;
			float: left;
			border: 1px solid black;
			padding:  0px 10px;
			padding-bottom: 10px;
		}
		.geshou ul{
			padding: 0px 5px;
		}
		.geshou .pai{
			width: 188px;
			height: 80px;
			list-style: none;
			margin: 20px;
		}
		.geshou img{
			float: left;
		}
		.geshou .paige p{
			height: 10px;
			float: left;
			margin: 5px;
			padding: 0px 5px;
		}
		.geshou .paige .dd{
		    width: 150px;
		    height: 30px;
		    background-color: #FFFFFF;
		    margin: 0px 25px;
		    padding: 5px 0px;
		}
		.zhubo{
			width: 228px;
			height: 420px;
			background-color: #ffffff;
			border-color: black;
			border: 1px solid ;
			float: left;
			padding: 10px;
		}
		.zhubo ul{
			margin-left: 1px;
		}
		.zhubo ul li{
			margin: 30px 0px;
		}
		.zhubo img{
			width: 50px;
			height: 50px;
			float: left;
		}
		.zhubo .pai {
			list-style: none;
		}
		.zhubo p{
			font-size: 11px;
			padding-left: 65px;
		}
		.weiba{
			width: 100%;
			height: 40px;
			background-color: #242424;
		}
</style>